<template>
    <div class="index">
        <my-left-area class="index-left" :leftcontent='leftcontent'></my-left-area>
        <div class="index-right">
            <!-- 头 -->
            <div class="right-header">
                <div class="header-left">
                    <span>充值权益运营后台</span>
                </div>
                <div class="header-right">
                    <span>欢迎您，{{uname}}</span>
                    <span style="padding-right:30px;padding-left:15px">{{format(time)}}</span>
                    <span class="out" @click="out()" style="color: #57A7FD;">退出</span>
                </div>
            </div>
            <router-view/>
        </div>
    </div>
</template>
<script>
import myLeftArea from "@/components/assembly/leftArea.vue";
export default {
    components:{myLeftArea},
    data() {
        return {
            leftcontent:[
                {
                    name:'概况',
                    children:[
                        {name:'实时概况',index:'/index'}
                    ]
                },
                {
                    name:'商品管理',
                    children:[
                        {name:'发布商品',index:'/index/publish'},
                        {name:'全部商品管理',index:'/index/management'},
                        {name:'商品说明文档',index:'/index/illustrate'},
                    ]
                },
                {
                    name:'订单管理',
                    children:[
                        {name:'用户充值记录',index:'/index/recharge'},
                        {name:'用户权益充值记录',index:'/index/interests'},
                    ]
                },
                {
                    name:'财务管理',
                    children:[
                        {name:'充值对账单',index:'/index/finance'},
                        {name:'权益对账单',index:'/index/financeInterests'},
                    ]
                },
                {
                    name:'设置',
                    children:[
                        {name:'管理员管理',index:'/index/administratorManage'},
                        {name:'通知管理',index:'/index/noticeManage'},
                    ]
                },
                {
                    name:'操作日志',
                    children:[
                        {name:'操作日志',index:'/index/log'}
                    ]
                }
            ],
            uname:'',
            time:'',
            upnum:true,
        }
    },
    mounted(){
        this.uname=sessionStorage.getItem('uname')
        setInterval(() => {
            this.time=Date.parse(new Date())
            // console.log(this.time)
        }, 1000);
    },
    methods: {
        out(){
            sessionStorage.clear();
            this.$store.commit('out_mutation')
            this.$router.push('/')
            window.location.reload()
        },
        format(shijianchuo) {
            var time = new Date(shijianchuo);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var f = time.getMinutes();
            var s = time.getSeconds();
            //想要什么格式可以自己改
            // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
    },
}
</script>
<style scoped>
.index{
    /* width: 100vw; */
    min-width: 1080px;
    min-height: 100vh;
    display: flex;
}

.index-left{
    width: 204px;
    transition: all .3s;
}
.index-right{
    width: calc(100% - 204px);
    /* height: 100%; */
    background: rgb(240, 240, 240);
}
.right-header{
    width: 100%;
    height: 86px;
    padding:0 30px;
    box-sizing: border-box;
    line-height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}
.header-left{
    font-size: 23px;
    color: #333333;
    display: flex;
    align-items: center;
}
.header-right{
    font-size: 16px;
    color: #666;
}
</style>